<template>
  <div class="input-list-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <input-list-view :items="inputItems" labelWidth="300px"></input-list-view>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in inputProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length != 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in inputMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'InputListDemo',
    data() {
      return {
        //表单控件组件
        inputItems: [
          {
            label: "ID",
            id: "id",
            value: null,
            type: "text",
            hidden: true,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "文本输入框",
            id: "name",
            value: null,
            type: "text",
            hidden: false,
            disabled: false,
            required: true,
            option: [],
            width: '300px'
          },
          {
            label: "文本多行输入框",
            id: "name",
            value: null,
            type: "textarea",
            hidden: false,
            disabled: false,
            required: true,
            option: [],
            width: '300px'
          },
          {
            label: "邮箱",
            id: "email",
            value: null,
            type: "email",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "数字",
            id: "age",
            value: null,
            type: "number",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px',
            min: 0,
            max: 100
          },
          {
            label: "下拉菜单-单选",
            id: "duty",
            value: null,
            type: "select",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "下拉菜单-多选",
            id: "duty",
            value: null,
            type: "multiSelect",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "可编辑的下拉菜单",
            id: "duty",
            value: null,
            type: "selectCanedit",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "级联选择下拉菜单",
            id: "duty",
            value: null,
            type: "selectCascader",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "年",
            id: "time",
            value: null,
            type: "year",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "月",
            id: "time",
            value: null,
            type: "month",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "年月日",
            id: "time",
            value: null,
            type: "date",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "年月日时间",
            id: "time",
            value: null,
            type: "datetime",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "年月日时间区间选择",
            id: "time",
            value: null,
            type: "datetimerange",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '400px'
          },
          {
            label: "年月日区间选择",
            id: "time",
            value: null,
            type: "daterange",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '400px'
          },
          {
            label: "特殊-label在上，input框在下",
            id: "time",
            value: null,
            type: "verticaltext",
            hidden: false,
            disabled: false,
            required: false,
            option: [
              {label: '本科', value: 0, placeholder: '本科生多少人', disabled: false},
              {label: '研究生', value: 0, placeholder: '研究生多少人', disabled: false},
              {label: '博士生', value: 0, placeholder: '博士生多少人', disabled: false},
              {label: '博士后', value: 0, placeholder: '博士后多少人', disabled: true},
            ],
            width: '300px'
          },
          {
            label: "特殊-宽度100%的文本输入框",
            id: "time",
            value: null,
            type: "fulltext",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          },
          {
            label: "特殊-宽度100%的多行文本输入框",
            id: "time",
            value: null,
            type: "bigtextarea",
            hidden: false,
            disabled: false,
            required: false,
            option: [],
            width: '300px'
          }],
        inputProps: [
          {
            name: 'items',
            desc: '默认值：[]。输入值。元素数据格式例如：',
            lists: [
              {name: 'label', desc: '显示的中文名称'},
              {name: 'id', desc: '用于发动给后台的值的key'},
              {name: 'value', desc: '表单值'},
              {name: 'type', desc: '控件类型'},
              {name: 'hidden', desc: '是否显示，例如id需要发给后台，但是不需要显示到界面上，可以设置为true'},
              {name: 'disabled', desc: '是否禁止输入'},
              {name: 'required', desc: '是否是必填项，设置为true会在label前显示红色的'},
              {name: 'option', desc: '默认值：[]，如果是下拉菜单等，需要将下拉菜单的选项写在此处，元素格式一般为{label: ,value: }'},
              {name: 'width', desc: '自定义表单控件的宽度'}
            ]
          },
          {name: 'width', desc: '默认值：0。表单控件组的父元素的宽度。'},
          {name: 'horizontal', desc: '默认值：false。是否水平显示表单控件。'},
          {name: 'labelWidth', desc: '默认值：100px。中文描述文字的宽度。'},
          {name: 'noLabelWidth', desc: '默认值：false。labelWidth是否可设置宽度，默认可设置。'},
          {name: 'showColon', desc: '默认值：true。是否显示中文描述文字后的：。'},
          {name: 'showSearch', desc: '默认值：false。是否显示 查询 按钮，默认不显示。'},
          {name: 'noLabel', desc: '默认值：false。是否显示中文描述文字，默认显示。'},
        ],
        inputMethods: [
          {name: 'on-change-date', desc: '参数：date。改变日期时触发。'},
          {name: 'on-change-year', desc: '参数：year。改变年时触发。'},
          {name: 'on-change-month', desc: '参数：month。改变月时触发。'},
          {name: 'on-change-date-time-range', desc: '参数：month。改变日期时间时触发。'},
          {name: 'on-change-date-range', desc: '参数：month。改变日期范围时触发。'},
          {name: 'on-change-option', desc: '参数：{item,label,value}。改变下拉选中项时触发。'},
          {name: 'on-change-multi-option', desc: '参数：date。改变多选下拉选中项时触发。'},
          {name: 'on-search', desc: '参数：items，传入的items，双向绑定后的返回值。点击 查询 按钮时触发。'},
          {name: 'on-edit-select-change', desc: '参数：date。编辑下拉选项时触发。'},
          {name: 'change-number', desc: '参数：number。改变数字时触发。'},
        ],
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .input-list-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
